// @include bg-image('../../assets/bg');
@mixin bg-image($url) {
    background-image: url($url + ".png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url($url + "@2x.png");
    }
}

@mixin border-1px($color) {
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}

@mixin border-1px-top($color) {
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}

@mixin border-1px-left($color) {
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        border-left: 1px solid $color;
        content: ' ';
    }
}

@mixin border-1px-right($color) {
    position: relative;
    &:after{
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 0;
        border-right: 1px solid $color;
        content: ' ';
    }
}

// 判断在不同dpr下的显示情况
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
    .border-1px,.border-1px-top,.border-1px-right,.border-1px-left{
        &::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
    .border-1px,.border-1px-top,.border-1px-right,.border-1px-left{
        &::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}